import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';

// DES: 定义一个函数，返回一个JSX
function App() {

    // DES: let定义范围内字段，const定义常量
    let userName = "Rayman";
    const user = {
        // DES: 假若使用{}方式引用，引用的是一个对象，而不是具体的值
        // firstName: {userName},
        firstName: userName,
        secondName: "Martin"
    };
    // DES: 定义JSX
    const element = <p>This is {forUserName(user)}'s React Study </p>;

    function forUserName(user) {
        return user.firstName + " " + user.secondName;
    }

    // DES: 返回JSX
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                {/* 引用外部定义的JSX */}
                {element}
            </header>
        </div>
    );
}

/** DES: 也可以使用ES6的class继承Component来返回一个组件*/
class TestClassComponent extends Component {
    render() {
        let element = <p>This is Rayman's React Study </p>;
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    {/* 引用外部定义的JSX */}
                    {element}
                </header>
            </div>
        );
    }
}

// DES: 导出当前模块
export default TestClassComponent
